<template>
  <view class="login">
    <image class="blogo" src="../../static/blogo.png" mode="widthFix"></image>
    <view class="gonsimt">{{gonsimt}}</view>
    <view class="content">{{content}}</view>
    <view class="form">
      <view class="user">
        <input v-model="username" placeholder="请输入手机号" />
      </view>
      <view class="upwd">
        <input type="password" v-model="password" placeholder="请输入密码" />
      </view>
      <view class="btn">
        <button class="btn_login" @click="submit" hover-class="active">登录</button>
      </view>
    </view>
    <view @click="forgot" class="forgot">忘记密码?</view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        gonsimt: '人生只若如初见',
        content: '遇见是最美好的开始',
        username: '',
        password: ''
      };
    },
    methods: {
      submit() {
        uniCloud.callFunction({
          name: 'login',
          data: {
            username: this.username,
            password: this.password
          },
          success(res) {
            if (res.result.code === 0) {
              uni.setStorageSync('uni_id_token', res.result.token)
              uni.setStorageSync('uni_id_token_expired', res.result.tokenExpired)
              uni.showToast({
                title: '登录成功',
                icon: 'none'
              })
            } else {
              uni.showModal({
                content: res.result.message,
                showCancel: false
              })
              return 
            }
            setTimeout(() => {
              uni.switchTab({
                url:"../news/news"
              })
            }, 2000)
          },
          fail() {
            uni.showModal({
              content: '登录失败，请稍后再试',
              showCancel: false
            })
          }
        })
      },
      forgot() {
        uni.navigateTo({
          url: '../forgot/forgot',
        });
      }
    }
  }
</script>

<style lang="scss" scoped>
  .login {
    width: 100vw;
    height: 100vh;
    overflow: auto;
    background-color: #92B6DE;

    .blogo {
      display: block;
      width: 200px;
      height: 200px;
      border-radius: 50%;
      margin: 30px auto;
    }

    .gonsimt {
      width: 100vw;
      display: flex;
      align-items: center;
      color: #4CD964;
      justify-content: center;
      font-size: 22px;
      margin: 10px 0;
    }

    .content {
      width: 100vw;
      display: flex;
      align-items: center;
      color: #FFF;
      justify-content: center;
      font-size: 22px;
      margin: 10px 0;
    }

    .form {
      width: 80vw;
      height: 300px;
      margin: 0 auto;
      border-radius: 25px;
      margin-top: 40px;
      padding: 20px;
      box-sizing: border-box;

      .user {
        width: 100%;
        height: 40px;
        border-radius: 20px;
        margin: 30px 0;
        background-color: #FFF;

        input {
          width: 100%;
          height: 100%;
          border-radius: 20px;
          padding-left: 20px;
        }
      }

      .upwd {
        width: 100%;
        height: 40px;
        border-radius: 20px;
        margin: 30px 0;
        background-color: #FFF;

        input {
          width: 100%;
          height: 100%;
          border-radius: 20px;
          padding-left: 20px;
        }
      }

      .btn {
        .btn_login {
          height: 50px;
          line-height: 50px;
          background-color: #0000ff;
          border-radius: 30px;
          color: #fff;
          font-size: 22px;
          letter-spacing: 10px;
        }

        .active {
          background-color: #00aaff;
          color: #fff;
        }
      }
    }

    .forgot {
      color: #fff;
      font-size: 14px;
      text-align: right;
      padding: 20px 35px 0 0;
    }
  }
</style>
